<template>
    <el-card shadow="hover">
        <template #header>
            <el-text type="info">更新日志</el-text>
        </template>
        <div class="wrapper">
            <el-skeleton v-if="loading" animated />
            <template v-else>
                <el-collapse v-if="hasLog">
                    <el-collapse-item v-for="item in releaseLogs" :key="item.id"
                        :title="`v${item.versionCode} (${parseTime(item.releaseDate)})`" :name="item.id">
                        <div v-html="marked.parse(item.summary) || ''"></div>
                    </el-collapse-item>
                </el-collapse>
                <el-empty v-if="!hasLog" :image-size="60" description="暂无更新日志" />
            </template>
        </div>
    </el-card>
</template>

<script>
export default {
    title: '更新日志',
    icon: 'Memo',
    description: '系统版本更新日志说明',
};
</script>

<script setup name="changelog">
import { ref, onMounted, computed } from 'vue';
import { marked } from 'marked';
import { listReleaseLog } from "@/api/system/releaselog.js";

const releaseLogs = ref([]);
const loading = ref(true);
const hasLog = computed(() => releaseLogs.value.length > 0);

onMounted(async () => {
    try {
        loading.value = true;
        const { result } = await listReleaseLog({ status: 1 });
        releaseLogs.value = result;
    } catch (error) {
        console.error('获取更新日志失败:', error);
    } finally {
        loading.value = false;
    }
});
</script>

<style lang="scss" scoped>
.wrapper {
    height: 300px;
    overflow-y: auto;
    padding: 10px;
}
</style>